<template>
  <view class="goods_detail" v-if="getGoodsDetail">
      <!-- 1 轮播图 start -->
      <u-swiper 
      :list="getGoodsDetail.pics" 
      name="pics_big"
      img-mode="aspectFit"
      height="497"
      bg-color="#fff"
      @click="imgPreview"
      ></u-swiper>
      <!-- 1 轮播图 end -->
      <!-- 2 价格 -->
      <view class="goods_price">￥{{getGoodsDetail.goods_price}}</view>
      <!-- 3 名称 -->
      <view class="goods_name u-line-2">{{getGoodsDetail.goods_name}}</view>
      <!-- 4 图文详情 -->
      <view class="goods_introduce">
          <!-- 图文详情标题 -->
          <view class="goods_introduce_title">图文详情</view>
          <!-- 图文详情的内容 -->
          <view v-html="getGoodsDetail.goods_introduce"></view>
      </view>

      <!-- 5 提交订单栏 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <!-- open-type="switchTab" 开启跳匝胡拿到naveBar页面的功能 -->
        <navigator 
        class="item car"
        url="/pages/cart/cart"
        open-type="switchTab"
        >
          <u-badge
            class="car-num"
            :count="cartCount"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="addShoppingCart">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>

  </view>
</template>

<script>
import { mapMutations, mapGetters } from "vuex"
export default {
    data() {
        return {
            getGoodsDetail: null
        }
    },
    computed: {
        // ...mapState("cart", ["cartList"]),
        ...mapGetters("cart", ["cartCount"])
        },
    async onLoad({goods_id}) {
        this.goods_id = goods_id || 9832
        // 调用获取数据部分，得到数据结构
        this.getGoodsDetailList(this.goods_id)
    },
    methods: {
        // vuex的辅助函数
        ...mapMutations("cart", ["cartAdd"]),

        async getGoodsDetailList(goods_id) {
            this.getGoodsDetail = await this.$u.http.get('/goods/detail',{goods_id})
            console.log(this.getGoodsDetail);
        },
        // 图片预览
        imgPreview(index) {
            console.log(index);
            // 小程序原生事件预览图片
            // 需要改造数据，将渲染的图片保存在一个新的对象中
            const urls = this.getGoodsDetail.pics.map((pic) => pic.pics_big)
            uni.previewImage({urls,current:urls[index]})
        },
        // 加入购物车功能
        addShoppingCart() {
            console.log('加入购物车');
            this.cartAdd({ value: this.getGoodsDetail });
        }
    }

}
</script>

<style lang="scss">
.goods_detail {
  padding-bottom: 102rpx;
  .goods_price {
    padding: 10rpx;
    color: $theme-color;
  }
  .goods_name {
    padding: 0 10rpx;
  }
}
.goods_introduce {
.goods_introduce_title{
    text-align: center;
    margin: 10rpx 0;
}
}
.navigation {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    margin-top: 100rpx;
    border: solid 2rpx #f2f2f2;
    background-color: #ffffff;
    padding: 16rpx 0;
    .left {
      display: flex;
      font-size: 20rpx;
      .item {
        margin: 0 30rpx;
        &.car {
          text-align: center;
          position: relative;
          .car-num {
            position: absolute;
            top: -10rpx;
            right: -10rpx;
          }
        }
      }
    }
    .right {
      display: flex;
      font-size: 28rpx;
      align-items: center;
      .btn {
        line-height: 66rpx;
        padding: 0 30rpx;
        border-radius: 36rpx;
        color: #ffffff;
      }
      .cart {
        background-color: #ed3f14;
        margin-right: 30rpx;
      }
      .buy {
        background-color: #ff7900;
      }
    }
  }
</style>